import dayjs from 'dayjs'
import RcGantt from 'rc-gantt'
import React, { useState } from 'react'
import './App.css'
import { AppstoreAddOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Modal } from "antd";
import { ShowCreateModal } from "./components/show-create-modal";

function createData(len) {
  const result = []
  for (let i = 0; i < len; i++) {
    result.push({
      id: i,
      name: `规划 - ${i}`,
      type: 'project',
      startDate: dayjs().subtract(-i, 'day').format('YYYY-MM-DD'),
      endDate: dayjs().add(i, 'day').format('YYYY-MM-DD'),
      children: [
        {
          id: 10000 + i,
          name: '需求',
          type: 'plan',
          startDate: dayjs().subtract(-i, 'day').format('YYYY-MM-DD'),
          endDate: dayjs().add(i, 'day').format('YYYY-MM-DD'),
        }
      ]
    })
  }
  return result
}

let data = [];

function fetch() {
  return [];
}

const App = () => {
  const [ showCreateProject, setShowCreateProject ] = useState(false)
  const [ showCreatePlan, setShowCreatePlan ] = useState(false)
  const [ showCreateTask, setShowCreateTask ] = useState(false)

  const [ currentProject, setCurrentProject ] = useState(0);
  const [ currentPlan, setCurrentPlan ] = useState(0)

  const [ data, setData ] = useState(createData(3))

  function renderCreatePlanButton(item) {
    return <Button type="primary" icon={ <PlusOutlined/> } size='small' onClick={ () => {
        setCurrentProject(item.id)
        setShowCreatePlan(true);
      } } />
  }

  let handleCreateProject = (v) => {
    setData(prev => {
      const newList = [ ...prev ]
      newList.push({
        id: Date.now(),
        name: v,
        type: 'project',
        children: []
      })
      return newList
    })
  }

  let handleCreatePlan = (v) => {
    setData(prev => {
      const newList = [...prev]
      const index = newList.findIndex(val => val.id === currentProject)
      newList[index].children.push({
        id: 10000 + currentProject,
        title:"1ac",
        type: 'plan',
        name: v,
      })
      return newList
    })
  }

  let handleCreateTask = (v) => {

  }

  function show(data) {
    return data.map(({name, ...el}) => {
      return {
        ...el,
        name: name,
      }
    });
  }

  return (
    <div style={ { width: '100%', height: "100vh" }}>

      <ShowCreateModal show={showCreateProject} type='project' onSubmit={(v) => handleCreateProject(v) } onClose={() => setShowCreateProject(false)} />
      <ShowCreateModal show={showCreatePlan} type='plan' onSubmit={(v) => handleCreatePlan(v) } onClose={() => setShowCreatePlan(false)} />
      <ShowCreateModal show={showCreateTask} type='task' onSubmit={(v) => handleCreateTask(v) } onClose={() => setShowCreateTask(false)} />


      <RcGantt
        rowHeight={40}
        renderLeftText={(item) => ''}
        renderRightText={(item) => <div className="title-right">{item.task.record.name}</div>}
        data={show(data)}
        columns={[
          {
            name: 'name',
            label: <>
              <span>个人规划</span>
              <span className='handle'>
                <Button type="primary" icon={<AppstoreAddOutlined />} size='small' style={{float:'right'}} onClick={() => setShowCreateProject(true)}>添加规划</Button>
              </span>
            </>,
            width: 380,
            render: (item) => {
              return <>
                <span>{ item.name }</span>
                <span className='handle'>
                  {
                    item.type === 'project'
                      ? renderCreatePlanButton(item)
                      : null
                  }
                </span>
              </>;
            }
          },
        ]}
        onUpdate={async (row, startDate, endDate) => {
        console.log('update', row, startDate, endDate)
        setData(prev => {
          const newList = [...prev]
          const index = newList.findIndex(val => val.id === row.id)
          newList[index] = {
            ...row,
            startDate: dayjs(startDate).format('YYYY-MM-DD'),
            endDate: dayjs(endDate).format('YYYY-MM-DD'),
          }
          return newList
        })
        return true
      }}
        />
    </div>
)
}

export default App